<template>
  <div>
    <el-dialog width="60%" class="WholeScroll" :visible.sync="formShow" @close="handleClickDeal('cancel')" v-dialog-drag :modal-append-to-body="false" :close-on-click-modal="false">
      <span slot="title">
        <i class="iconfont icon-liuchengguanli-2"></i>
        <span>{{ title }}</span>
      </span>
      <div class="WholeScroll" style="max-height: 550px; overflow: auto">
        <el-form :model="formBaseData" ref="formBaseData" :rules="formBaseRules">
          <el-row>
            <el-col :span="23">
              <el-form-item label="选择项目" prop="orderDate" :label-width="formlabelWidth">
                <el-select style="width: 100%" v-model="formBaseData.projectId" filterable multiple placeholder="" :disabled="
                      detailType === 'check' || detailType === 'approve'
                    " @change="">
                  <el-option v-for="(item, i) in selectList.project" :key="item.id" :label="item.shortName" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <template v-if="detailType === 'build' || detailType === 'edit'">
          <el-button size="small" type="primary" :loading="isLoading" @click="handleClickDeal('submit', { flag: 1 })"><i class="iconfont icon-icon_save"></i> 确 定
          </el-button>
        </template>
        <el-button size="small" @click="handleClickDeal('cancel')"><i class="iconfont icon-icon_cancel"></i> 取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import projectSectionInfo from '@/api/buss/common'
import msgUtil from '@/utils/msgUtil'
import { getProjectBid, setProjectww } from '@/api/buss/frontProject'
export default {
  name: 'bidTable-detail',
  props: {
    postDetail: {
      type: Object,
      default: {
        show: false,
        type: 'build',
        params: {},
      },
    },
  },
  watch: {
    postDetail(value) {
      console.log("type=", value.type)
      // 显示详情弹窗
      this.formShow = value.show
      // 初始化窗口参数
      this.activeName = 'first'
      // 详情类型
      this.detailType = value.type
      // 详情的流程操作处理
      this.list = value.list
      this.formBaseData.companyId = value.companyId
      this.formBaseData.enginType = value.enginType
      this.formBaseData.projectStage = value.projectStage
      this.formBaseData2.companyId = value.companyId
      this.formBaseData2.enginType = value.enginType
      this.formBaseData2.projectStage = value.projectStage

      this.detailActions.splice(0, this.detailActions.length)
      // 详情id
      this.detailId = value.params === undefined ? 0 : value.params.detailId

      if (this.detailType !== 'build') {
        // 获取详情请求
        this.getDetail()
      }
      if (this.detailType === 'build') {
        this.title = '设置督战项目'
        this.getProject()
      }
    },
  },
  data() {
    return {
      fileList: [],
      newDetName: '',
      isLoading: false,
      detailType: 'build', // 详情类型 build新建 check不可编辑查看 edit编辑
      detailId: '', // 当前详情的id
      detailActions: [], // 当前详情的操作项
      formShow: false, // 表单展示
      formlabelWidth: '120px', // 表单左侧标题宽度
      formlabelRightWidth: '150px', // 表单左侧标题宽度
      formlabelWidth2: '120px', // 表单左侧标题宽度
      title: '设置督战项目',
      activeName: 'first',
      list: [],
      // 所有下拉框列表的集合
      selectList: {
        status: [
          {
            name: '进行中',
            id: '1'
          },
          {
            name: '已批复',
            id: '2'
          }
        ],
        project: [],
      },
      // 表单基本信息内容
      formBaseData: {
        projectType: '在建项目',
        projectId: '',
        companyId: '',
        enginType: '',
        projectStage: '',
      },
      formBaseData2: {
        projectType: '',
        projectIds: '',
        companyId: '',
        enginType: '',
        projectStage: '',
      },
      // 表单基本信息验证
      formBaseRules: {
        projectId: [
          { required: true, message: '请选择' + '状态', trigger: 'change' },
        ],
        projectType: [
          { required: true, message: '请选择' + '批复日期', trigger: 'change' },
        ]
      },
    }
  },
  methods: {
    submitDetail(type, callback) {
      this.formBaseData2.projectIds = this.formBaseData.projectId.join(',')
      setProjectww(this.formBaseData2).then((res) => {
        // this.$messageSuccess('保存成功')
        // this.detailId = !this.detailId ? res.data.id : this.detailId
        this.isLoading = false
        if (callback) callback()
      }).catch((res) => {
        console.log('请求出现错误', res)
        this.isLoading = false
        // this.$messageError(this.$route.name + '提交详情-请求失败')
      })
    },
    getProject() {
      this.formBaseData.projectId = [];
      getProjectBid({ enginType: this.formBaseData.enginType }).then((res) => {
        this.$set(this.selectList, 'project', res.list)
        this.list.forEach(listItem => {
          this.selectList.project.forEach(item => {
            if (listItem.projectId == item.id) {
              this.formBaseData.projectId.push(item.id)
            }
          })
        })
      })
        .catch((res) => {
          console.log('请求出现错误', res)
          this.isLoading = false
          // this.$messageError(this.$route.name + '提交详情-请求失败')
        })
      // projectSectionInfo.getLeftProjectTree().then(res => {
      //   if(res.code == 200){
      //     this.$set(this.selectList,'project',res.data)
      //     this.list.forEach(listItem=>{
      //       this.selectList.project.forEach(item => {
      //         if(listItem.projectId == item.id){
      //           this.formBaseData.projectId.push(item.id)
      //         }
      //       })
      //     })
      //   }
      // })

    },
    changeFileOne(file) {
      this.$set(this, 'fileList', [...file])
    },
    // 点击各个流程的按钮事件
    handleClickDeal(type, res) {
      console.log(type, res)
      switch (type) {
        // 取消，关闭窗口
        case 'cancel':
          // 重置表单验证
          this.$refs['formBaseData'].resetFields()
          // 清空表单内容
          this.formBaseData = {
            projectType: '在建项目',
            projectId: ''
          }
          // 清空文件
          this.selectList.file = []
          // 关闭弹窗
          this.formShow = false
          this.enableSectionSelection = false
          break
        // 保存
        case 'submit':
          let flag = res.flag
          // 表单验证
          this.$refs['formBaseData'].validate((valid) => {
            if (valid) {
              this.isLoading = true
              // 提交详情
              this.submitDetail(flag, () => {
                // this.$refs.cmsFileTables.bindAllFile(this.detailId)
                this.formShow = false
                this.isLoading = false
                // 传值给父组件刷新列表
                this.$emit('reloadList')
              })
            } else {
              this.isLoading = false
            }
          })
          break
        // 删除
        case 'delete':
          this.$prompt('删除理由', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          })
            .then(({ value }) => {
              if (value === null || value === '') {
                this.$messageError('请填写删除理由后重试')
                return
              }
              this.sealDealHttp(
                res.url,
                ``,
                {
                  id: this.detailId,
                  description: value,
                },
                () => {
                  this.$messageSuccess('删除成功!')
                  this.formShow = false
                  // 传值给父组件刷新列表
                  this.$emit('reloadList')
                }
              )
            })
            .catch(() => {
              console.log('请求出现错误')
            })
          break
      }
    },
    tableChange(val) {
      this.$set(this, 'buildUnitTable', [...val])
    },
    tableChange_htqd(val) {
      this.$set(this, 'buildUnitTable_htqd', [...val])
    },
  },
}
</script>

<style scoped lang="scss">
.el-select.half {
  width: 250px;
}

.el-select.fill {
  width: 800px;
}

.contract_input {
  width: 250px;
}

.contract_input2 {
  width: 240px;
}

.el-input .el-select {
  width: 130px;
}

.fee_add {
  color: #008fe0;
  border-color: #008fe0;
  float: right;
  margin-bottom: 10px;
}
</style>
